window.addEventListener('load', function () {
    class Cart {
        constructor() {
            this.tBody = document.querySelector('tbody');
        }
        // 获取数据 渲染到购物车
        getData() {
            if (localStorage.getItem("goodsMsg")) {
                this.data = JSON.parse(localStorage.getItem('goodsMsg'))
            } else {
                this.data = []
            }
            // 渲染页面
            this.display()
        }
        display() {
            var str = ''
            for (let i = 0; i < this.data.length; i++) {
                str += `<tr index="${this.data[i].goodsId}">
                            <td><img src="${this.data[i].msg.img}" alt=""></td>
                            <td>${this.data[i].msg.name}</td>
                            <td>${this.data[i].msg.price}</td>
                            <td index="${i}">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="num" value="${this.data[i].num}">
                                <a href="javascript:;" class="increment">+</a></td>
                            <td>${ this.data[i].msg.price * this.data[i].num }</td>
                            <td class="delete">删除</td>
                        </tr>`;
            }
            this.tBody.innerHTML = str;
        }
        // 绑定事件
        addEvent() {
            var that = this;
            this.tBody.addEventListener('click', function (e) {
                var tar = e.target;
                // console.log(tar);
                that.goodsIndex = tar.parentNode.getAttribute("index");
                // 点击加号 数量 +1
                if (tar.className == 'increment') {
                    that.id = tar.parentNode.getAttribute("index");
                    // console.log('加1');
                    that.addNum(that.goodsIndex);
                    that.total(tar);
                    that.changeData(function (i) {
                        that.data[i].num = that.newVal;
                    })
                }
                // 点击减号 数量-1
                if (tar.className == 'decrement') {
                    that.id = tar.parentNode.getAttribute("index");
                    // console.log('减1');
                    if (that.newVal != 1) {
                        that.minusNum(that.goodsIndex);
                        that.total(tar);
                        that.changeData(function (i) {
                            that.data[i].num = that.newVal;
                        })
                    }
                }
                // 删除商品
                if (tar.className == 'delete') {
                    // 获取当前点击的删除按钮的商品id
                    that.id = tar.parentNode.getAttribute("index");
                    // 删除对应dom元素
                    tar.parentNode.remove();
                    // 删除对应本地存储数据
                    that.changeData(function (i) {
                        that.data.splice(i, 1)
                    })
                }
            })
            this.tBody.addEventListener('input', function (e) {
                var tar = e.target;
                if (tar.className == 'num') {
                    that.newVal = tar.value;
                    // 让总价跟着数量变
                    that.total(tar);
                    that.changeData(function (i) {
                        that.data[i].num = that.newVal;
                    })
                }
            })
        }
        // 数量+1
        addNum(index) {
            var that = this;
            var num = this.tBody.querySelectorAll('.num')[index];
            var numval = num.value;
            numval++;
            num.value = numval;
            this.newVal = num.value;
        
        }
        // 数量-1
        minusNum(index) {
         
            var num = this.tBody.querySelectorAll('.num')[index];
            var numval = num.value
            numval--;
            num.value = numval;
            this.newVal = num.value;
          
        }
        // 每样商品总价  小计
        total(tar) {
            tar.parentNode.nextElementSibling.innerHTML = this.newVal * tar.parentNode.previousElementSibling.innerHTML;
        }
        // 改变本地存储数据
        changeData(fn) {
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].goodsId === this.id) {
                    fn(i);
                    break;
                }
            }
            localStorage.setItem("goodsMsg", JSON.stringify(this.data));
        }
    }
    var cart = new Cart();
    cart.getData();
    cart.addEvent()
})